<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          table {
            border: 1px solid #ccc;
            width: 600px;
            height: 400px;
            border-spacing: 0px;
            border-collapse: collapse;
            margin: auto;
        }

        table td {
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>
<body>
  
    <table>
        <thead>
            <td>学号</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>总成绩</td>
            <td>备注</td>
        </thead>
        <tbody id="t">
          
        </tbody>
        
      
    </table>
    <script>
         var students = [
            { xuehao: 1, chinese: 105, math: 62, english: 118 },
            { xuehao: 2, chinese: 89, math: 78, english: 120 },
            { xuehao: 3, chinese: 86, math: 64, english: 91 },
            { xuehao: 4, chinese: 78, math: 99, english: 91 },
            { xuehao: 5, chinese: 107.5, math: 97, english: 70 },
            { xuehao: 6, chinese: 112, math: 61, english: 92 },
            { xuehao: 7, chinese: 101, math: 79, english: 104 },
            { xuehao: 8, chinese: 71, math: 72, english: 105 },
            { xuehao: 9, chinese: 56, math: 68, english: 61 },
            { xuehao: 10, chinese: 98, math: 83, english: 77 }
        ]
        function map(arr,cb){
            // 动态循环添加成绩总数
        for(var j=0; j<students.length; j++){
            students[j].result=students[j].chinese+students[j].math+students[j].english
        }
        var res1=students.sort(function(a,b){
            return b.chinese-a.chinese
        })[0]

        var res2=students.sort(function(a,b){
            return b.math-a.math
        })[0]

        var res3=students.sort(function(a,b){
            return b.english-a.english
        })[0]
        // 成绩从高到低排序
        students.sort(function(a,b){
            return b.result-a.result
        })
        cb(res1,res2,res3)
        }
        

       
        function cb(res1,res2,res3){
             // 循环往表格添加数据
            for(var i=0; i<students.length;i++){
            var flag=""
            if(students[i].chinese==res1.chinese){
                flag="语文成绩最高"
            }
            else if(students[i].math==res2.math){
                flag="数学成绩最高"
            }
            else if(students[i].english==res3.english){
                flag="英语成绩最高"
            }
            t.innerHTML+=`
            <tr>
                <td>${students[i].xuehao}</td>
                <td>${students[i].chinese}</td>
                <td>${students[i].math}</td>
                <td>${students[i].english}</td>
                <td>${students[i].result}</td>
                <td>${flag}</td>
            </tr>
      `
        }
        }

        // 调用函数
        map(students,cb)
        
    </script>
</body>
</html>